<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index2.css">
    <script src="jq/jquery.min.js"></script>
</head>
<body>

    <div class="box">
        <span class="left"> < </span>
        <span class="right"> > </span>
        <ul class="a">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="b">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="c">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="d">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <ul class="e">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</body>
<script>
    
    let a = 0;
    let section = $('ul');
    let button1 = $('.left');
    let button2 = $('.right');
    console.log(a);
    button1.on('click', function () {
        a++;
        section.css('transform', 'rotateX(' + a * 90 + 'deg)');
    })
    button2.on('click', function () {
        a--;
        section.css('transform', 'rotateX(' + a * 90 + 'deg)');
        console.log(a * 90);
    })
</script>
</html>